<template>
	<view class="flex-center" v-if="x.type === 'BaseIcon'" style="" :style="[x._outerStyle]">
		<view class="flex-x flex-wrap" style="" :style="[x._interStyle]">
			<view class="flex-y flex-x-center" v-for="(xx, ii) in x.data" :key="xx.unid" style=""
				:style="[{ width: (100 / x.interStyle.vCol) + '%' }]">
				<template v-if="ii < x.interStyle.vCol * x.interStyle.vRow">
					<view v-if="xx.image" style="" :style="[x._inputStyle]" @click="parseUrl(xx.link)">
						<uv-image :src="xx.image" mode="widthFix" width="100%" :lazy-load="true" />
					</view>
					<view v-if="xx.image" style="width:6em;" :style="[x._fontStyle]">
						<view class="tn-text-ellipsis-1">{{ xx.title }}</view>
					</view>
					<view v-if="!xx.image"></view>
				</template>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
export default {
	props: {
		x: {
			type: Object,
			required: true
		}
	}
}
</script>